import { defineComponent, ref, Transition } from "vue";
import LangSelect from "./selects/langSelect";
import { useI18n } from "vue-i18n";
import Product from "./product";
import Market from "./market";
import Enterprise from "./enterprise";
import More from "./more";
import './index.less'
import router from "@/router";

export default defineComponent({
    setup() {
        const { t } = useI18n()
        const lang = ref(localStorage.getItem('locale') || 'cn')
        const show = ref<Boolean>(true);
        return () => (
            <div class='topbar'>
                <Transition>
                    <div class='learn_more' v-show={show.value}>{t('head.top_prompt')}<span class='more'>{t('head.learn_more')}</span> <span class='close' onClick={() => show.value = !show.value}>X</span> </div>
                </Transition>
                <div class='tab_bar'>
                    <div class='home_logo_reactor' ><img src="/head/home_logo_reactor.png" alt="home_logo_reactor" /><span>Reactor</span></div>
                    <div class='mid'>
                        <div class='text'>
                            <div class='special' onClick={() => router.push('/')}>{t('head.home_page')}</div>
                        </div>
                        <Product />
                        <Market />
                        <Enterprise />
                        <More />
                        <div class='text'>
                            <div class='special'>{t('head.price')}</div>
                        </div>
                        <div class='text'>
                            <div class='special'>{t('head.help')}</div>
                        </div>
                    </div>
                    <div class='right'>
                        <div> <LangSelect v-model={[lang.value, "value"]} /> </div>
                        <div class='link_wallet'>{t('head.link_wallet')}</div>
                        <div class='right_download'>
                            <div class='qr_code'>
                                <img src="/head/home_icon_win.png" alt="" />
                                <img src="/head/home_icon_apple.png" alt="" />
                            </div>
                            <div class="show">
                                <div class="dowImg">
                                    <img src="/head/Group.svg" />
                                </div>
                                <div class="dowText">
                                    {t('tail.scan_to_use_DAPP')}
                                </div>
                                <div class="dowBtm">
                                    {t('head.client_download')}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        );
    }
})